<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="clickAdd">添加商品</el-button>
        </div>
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">商品名称：</span>
                <el-input placeholder="输入商品名称" v-model.trim="good_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">审核状态：</span>
                <el-select v-model="examine_type" clearable placeholder="请选择审核状态">
                    <el-option :label="item.names" :value="item.type" v-for="item in examines" :key="item.type" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品分类：</span>
                <el-select v-model="class_id" clearable filterable :filter-method="filterClass" placeholder="输入可筛选分类" @clear="clearCate">
                    <el-option :label="item.title" :value="item.cate_id" v-for="item in cate_arrs" :key="item.title" />
                </el-select>
            </div>
            <!-- <div class="task-one__item">
                <span class="task-one__label">商品属性：</span>
                <el-cascader
                    ref="cascaderRef"
                    v-model="attr_value_id"
                    :props="attrName"
                    :options="pub_options.attr_list"
                    clearable
                    placeholder="请选择商品属性"
                />
            </div> -->
            <div class="task-one__item">
                <span class="task-one__label">商品等级：</span>
                <el-select v-model="level_id" clearable placeholder="请选择商品等级">
                    <el-option :label="item.level_name" :value="item.level_id" v-for="item in pub_options.leave_list" :key="item.level_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品颜色：</span>
                <el-select v-model="colors_id" clearable placeholder="请选择颜色分类">
                    <el-option :label="item.title" :value="item.color_id" v-for="item in pub_options.color_list" :key="item.color_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">标签类型：</span>
                <el-select v-model="tag_type" clearable placeholder="请选择标签类型">
                    <el-option :label="item.label_name" :value="item.label_id" v-for="item in pub_options.label_list" :key="item.label_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品编码：</span>
                <el-input placeholder="输入商品编码" v-model.trim="good_code" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">上架时间：</span>
                <el-date-picker
                    v-model="shelf_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__item">
                <span class="task-one__label">添加时间：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane :label="`${item.label}(${item.nums})`" :name="item.name" v-for="item in tabarr" :key="item.name">
                <!-- 批量操作 -->
                <div class="batch-oper" v-if="tabName > 0">
                    <el-button type="default" plain @click="clickShelf(tabName == 1 || tabName == 3 ? 1 : 2)" v-if="tabName > 0">
                        {{ tabName == 1 || tabName == 3 ? "批量下架" : "批量上架" }}
                    </el-button>
                    <el-button type="default" plain @click="clickTemplate" v-if="tabName == 1 || tabName == 3">批量修改价格库存</el-button>
                </div>

                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    @selection-change="handleAllSelected"
                >
                    <el-table-column type="selection" width="55" fixed="left" />
                    <el-table-column prop="product_id" label="ID" width="90" fixed="left"></el-table-column>
                    <el-table-column label="商品" width="290" fixed="left">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.product_img + '!img_400'"
                                    fit="cover"
                                    v-if="row.product_img"
                                />
                                <div class="table-lr__right">
                                    <p class="lr-title line-one" style="font-size: 15px">{{ row.product_name }}</p>
                                    <p class="lr-text line-one" style="margin-top: 0">等级：{{ row.level }}，颜色：{{ row.color }}</p>
                                    <p class="good-price line-one">
                                        <em>￥</em>{{ row.product_price || "0"
                                        }}<span class="good-price__span">供应价:<em>￥</em>{{ row.cost_price || "0" }}</span>
                                    </p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cate_title" label="商品分类" width="120"></el-table-column>
                    <el-table-column prop="type_label" label="标签" width="100">
                        <template #default="{ row }">
                            <p v-if="row.label_id > 0 && row?.product_label?.hidden == 0">{{ row.product_label.label_name }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sku" label="库存" width="100"></el-table-column>
                    <el-table-column label="规格" width="120">
                        <template #default="{ row }">
                            <p>{{ row.norm }}/{{ row.unit }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="供应商" width="200">
                        <template #default="{ row }">
                            <p v-if="row.supplier_id > 0">{{ row.supplier_title }}[ID:{{ row.supplier_id }}]</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sales" label="销量" width="100"></el-table-column>
                    <el-table-column label="排序" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.order_by"
                                clearable
                                placeholder="输入排序"
                                oninput="value=value.replace(/[^\d]/g,'')"
                                style="width: 90px"
                                @change="() => inputSort(row)"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="updated_at_label" label="添加时间" width="160"></el-table-column>
                    <el-table-column prop="updated_at_label" label="上架时间" width="160"></el-table-column>
                    <el-table-column prop="verify_time_label" label="审核时间" width="160"></el-table-column>
                    <el-table-column label="审核备注" width="220">
                        <template #default="{ row }">
                            <div class="line-two">{{ row.refuse }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核状态" width="90" fixed="right">
                        <template #default="{ row }">
                            <span style="color: #4b93fa" v-if="row.verify == 1">已通过</span>
                            <span style="color: #ff5722" v-else>{{ row.verify == 2 ? "已拒绝" : "待审核" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="170" class-name="operation-nav" fixed="right">
                        <template #default="{ row }">
                            <el-button link type="primary" class="theme-btn" @click="clickDetail(row)">详情</el-button>
                            <el-button link type="primary" class="theme-btn" @click="clickExam(row)">审核</el-button>
                            <el-button link type="primary" class="theme-btn" @click="clickEdit(row)">编辑</el-button>
                            <el-button link type="primary" class="theme-btn" @click="clickTag(row)">标签</el-button>
                            <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                                <template #reference>
                                    <el-button link type="primary" class="theme-btn">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <!-- 商品审核 -->
        <el-dialog v-model="dialogExam" :append-to-body="true" :destroy-on-close="true" title="商品审核" width="600px">
            <div>
                <detail-item title="商品名称" bottom="24px" :value="objs.product_name" />
                <detail-item title="审核结果" bottom="24px">
                    <el-radio-group v-model="radio_type">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">不通过</el-radio>
                    </el-radio-group>
                </detail-item>
                <detail-item title="拒绝原因" bottom="24px">
                    <el-input v-model.trim="exam_remark" :rows="5" type="textarea" clearable placeholder="请输入拒绝原因，不通过时必填" />
                </detail-item>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="btn_loading" @click="confirmExam">确认审核</el-button>
                    <el-button @click="dialogExam = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 商品标签设置 -->
        <el-dialog v-model="dialogTag" :append-to-body="true" :destroy-on-close="true" title="标签设置" width="600px">
            <div>
                <detail-item title="商品名称" bottom="24px" :value="objs.product_name" />
                <detail-item title="标签名称" bottom="24px">
                    <el-radio-group v-model="tag_radio_type">
                        <el-radio class="tag-good" :label="item.label_id" v-for="item in tag_arrs" :key="item.label_id">{{ item.label_name }}</el-radio>
                    </el-radio-group>
                </detail-item>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="btn_loading" @click="confirmTag">确认</el-button>
                    <el-button @click="dialogTag = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 导入/导出商品 -->
        <el-dialog
            v-model="dialogImportGoods"
            title="批量修改价格库存"
            width="700px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
        >
            <div>
                <div class="dialog-h3">
                    <p class="dialog-h3-title">提示：</p>
                    <p>1、模板中的表头不可更改，表头行不可删除;</p>
                    <p>2、导入数据模板时请先<span class="span-down" @click="downExcel">下载模板</span>，在模板中按字段填写信息，然后上传该文件.</p>
                    <p>3、文件大小不超过10MB;</p>
                    <p>4、限制导入10000行记录，超出部分请分多次导入。</p>
                </div>
                <el-upload
                    ref="uploadFileRef"
                    accept=".xlsx,.xls,.csv"
                    :file-list="fileList_two"
                    :action="actionImgUrl()"
                    :auto-upload="false"
                    :limit="1"
                    :on-exceed="handleExceed_two"
                    :on-remove="handleRemove_two"
                    :on-change="fileChange_two"
                >
                    <template #trigger>
                        <el-button type="primary">选择文件</el-button>
                    </template>
                    <el-button class="downs" type="warning" :loading="btn_loading" @click.stop="uploadFile">上传导入</el-button>
                </el-upload>
            </div>
        </el-dialog>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, onBeforeUnmount, onActivated } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { useBaseStore } from "@store/base"
import { genFileId } from "element-plus"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"
import DetailItem from "@components/DetailItem.vue"
import GoBack from "@components/GoBack.vue"

const store = useBaseStore()
const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    pubClass()
    getTag()
})

onBeforeUnmount(() => {
    uploadFileRef.value = null
})

onActivated(() => {
    arr_data.value = []
    getList()
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "GoodsListDetail" || to.name === "GoodsListEdit") {
        store.setInclude("GoodsList")
    } else {
        store.delInclude("GoodsList")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

/**
 * tab切换
 * @param {String} status tab切换的类型值
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const status = ref("0")
const tabName = ref("0")
const tabarr = ref([
    {
        label: "全部商品",
        name: "0",
        status: "0",
        nums: 0,
    },
    {
        label: "出售中商品",
        name: "1",
        status: "1",
        nums: 0,
    },
    {
        label: "待上架",
        name: "2",
        status: "2",
        nums: 0,
    },
    {
        label: "已售罄",
        name: "3",
        status: "3",
        nums: 0,
    },
])
const handleTab = (pane) => {
    status.value = tabarr.value[pane.index].status
    getStatistics()
}
function getList() {
    let params = {
        screen_type: status.value, // 筛选类型[0:全部商品,1:出售中商品,2:待上架,3:已售罄]
        page: page.value,
        limit: pageSize.value,
        so: good_name.value,
        level_id: level_id.value,
        label_id: tag_type.value,
        cate_id: class_id.value,
        color_id: colors_id.value,
        verify: examine_type.value, // 审核
        supplier_id: supplier_id.value,
        // attr_value_id: attr_value_id.value ? attr_value_id.value[1] : "",
        s_time: area_time.value ? area_time.value[0] : "", // 添加时间
        l_time: area_time.value ? area_time.value[1] : "",
        s_on_time: shelf_time.value ? shelf_time.value[0] : "", // 上架开始日期
        l_on_time: shelf_time.value ? shelf_time.value[1] : "", // 上架开始日期
        sku_code: good_code.value, // 商品编码
    }
    getdata("product/index", params)
}
// 统计
function getStatistics() {
    proxy.$axios
        .get("product/tongji", {
            params: {
                cate_id: class_id.value,
                color_id: colors_id.value,
                level_id: level_id.value,
                // attr_value_id: attr_value_id.value ? attr_value_id.value[1] : "",
                so: good_name.value,
                s_time: area_time.value ? area_time.value[0] : "", // 添加时间
                l_time: area_time.value ? area_time.value[1] : "",
                s_on_time: shelf_time.value ? shelf_time.value[0] : "", // 上架开始日期
                l_on_time: shelf_time.value ? shelf_time.value[1] : "", // 上架开始日期
                sku_code: good_code.value, // 商品编码
            },
        })
        .then((res) => {
            pubRefreshParams(getList)
            if (res.data.code == 0) {
                let result = res.data.data
                tabarr.value[0].nums = result.total_count
                tabarr.value[1].nums = result.sale_count
                tabarr.value[2].nums = result.wait_sale_count
                tabarr.value[3].nums = result.sold_out_count
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 搜索
const good_name = ref("")
const level_id = ref("")
const colors_id = ref("")
const class_id = ref("")
const area_time = ref("") // 添加时间
const supplier_id = ref("") // 供应商ID
// const attr_value_id = ref("") // 属性值ID
const good_code = ref("") // 商品编码
const shelf_time = ref("") // 上架时间
const tag_type = ref("") // 标签
const attrName = {
    label: "attr_value_name",
    value: "attr_value_id",
    children: "attr_value",
}
const handleSearch = () => {
    search_btn.value = true
    getStatistics()
}

/**
 * 批量操作
 * @param {Array} ids 选中数组的集合
 */
const ids = ref([])
const handleAllSelected = (val) => {
    let arrs = []
    for (let i = 0; i < val.length; i++) {
        arrs.push(val[i].product_id)
    }
    ids.value = arrs
}

// 批量上/下架，状态[1:下架,2:上架]
const clickShelf = (status) => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择至少一个商品", type: "warning" })
        return
    }
    proxy.$axios
        .post("product/batchOnSale", {
            product_ids: ids.value,
            status,
        })
        .then((res) => {
            if (res.data.code == 0) {
                ids.value = []
                proxy.$message({ message: `${status == 1 ? "下架" : "上架"}成功！`, type: "success" })
                getStatistics()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 导入/导出商品-批量修改价格/库存
 * @param {Array} fileList_two 上传客户存储数组
 * @param {Boolean} dialogImportGoods 导入客户弹窗状态
 * @param {Function} actionImgUrl 阻止上传地址
 * @param {Function} handleRemove 文件状态移除时的钩子
 * @param {Function} fileChange 文件状态改变时的钩子
 * @param {Function} uploadFile 文件上传
 */
const uploadFileRef = ref(null)
const fileList_two = ref([])
const dialogImportGoods = ref(false)
const fileChange_two = (file, fileArr) => {
    fileList_two.value = fileArr
}
const handleExceed_two = (files) => {
    uploadFileRef.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadFileRef.value.handleStart(file)
}
const handleRemove_two = () => {
    fileList_two.value = []
}
const clickTemplate = () => {
    btn_loading.value = false
    fileList_two.value = []
    dialogImportGoods.value = true
}
const downExcel = () => {
    proxy.$axios
        .get("product/export/productTpl", {
            params: {
                screen_type: status.value, // 筛选类型[0:全部商品,1:出售中商品,2:待上架,3:已售罄]
                so: good_name.value,
                level_id: level_id.value,
                label_id: tag_type.value,
                cate_id: class_id.value,
                color_id: colors_id.value,
                verify: examine_type.value, // 审核
                supplier_id: supplier_id.value,
                s_time: area_time.value ? area_time.value[0] : "", // 添加时间
                l_time: area_time.value ? area_time.value[1] : "",
                s_on_time: shelf_time.value ? shelf_time.value[0] : "", // 上架开始日期
                l_on_time: shelf_time.value ? shelf_time.value[1] : "", // 上架开始日期
                sku_code: good_code.value, // 商品编码
            },
            responseType: "blob",
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}
// 上传文件，生成文件路径
const uploadFile = () => {
    if (fileList_two.value.length == 0) {
        proxy.$message({ message: "请选择文件上传", type: "warning" })
        return
    }
    btn_loading.value = true
    let data = new FormData()
    data.append("excel", fileList_two.value[0].raw)
    data.append("type", "check") // [check:校验文件,import:导入文件]
    proxy.$axios
        .post("product/import/product", data)
        .then((res) => {
            fileList_two.value = []
            if (res.data.code == 0) {
                let result = res.data.data
                confirmUpload(result)
            } else {
                btn_loading.value = false
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
// 同样的接口，上传文件路径，最终修改价格
function confirmUpload(params) {
    let data = new FormData()
    data.append("path", params.file)
    data.append("name", params.name)
    data.append("size", params.size)
    data.append("type", "import") // [check:校验文件,import:导入文件]
    proxy.$axios
        .post("product/import/product", data)
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                uploadFileRef.value.clearFiles()
                // 数据导入有一定的延迟，需要延迟请求
                dialogImportGoods.value = false
                proxy.$message({ message: "预计1~3分钟同步更新完成，请稍后刷新当前页面！", type: "success" })
                // getStatistics()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
// 图片上传地址
function actionImgUrl() {
    return ""
}

// 排序
const inputSort = (row) => {
    if (!row.order_by) {
        proxy.$message({ message: "请输入排序数字", type: "warning" })
        return
    }
    proxy.$axios
        .post("product/sort", {
            product_id: row.product_id,
            order_by: row.order_by,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 商品审核
 * @param {Object} objs 商品数据项
 * @param {String} radio_type 审核类型 [1:通过,2:拒绝]
 * @param {String} exam_remark 拒绝原因
 * @param {Boolean} dialogExam 弹窗状态
 * @param {Boolean} btn_loading 弹窗提交按钮状态
 * @param {Array} examines 审核状态数组
 * @param {String} examine_type 审核状态值-搜索使用
 */
const radio_type = ref(1)
const exam_remark = ref("")
const objs = ref({})
const dialogExam = ref(false)
const btn_loading = ref(false)
const clickExam = (row) => {
    objs.value = row
    dialogExam.value = true
    radio_type.value = row.verify == 1 ? 1 : 2
    exam_remark.value = row.refuse
}
// 审核
const confirmExam = () => {
    if (exam_remark.value == "" && radio_type.value == 2) {
        proxy.$message({ message: "请输入拒绝原因！", type: "warning" })
        return
    }
    dialogExam.value = false
    btn_loading.value = true
    proxy.$axios
        .post("product/verify", {
            product_id: objs.value.product_id,
            verify: radio_type.value,
            refuse: exam_remark.value,
        })
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                dialogExam.value = false
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
const examine_type = ref("")
const examines = ref([
    {
        type: 0,
        names: "全部",
    },
    {
        type: 1,
        names: "待审核",
    },
    {
        type: 2,
        names: "已通过",
    },
    {
        type: 3,
        names: "已拒绝",
    },
])

/**
 * 商品标签设置
 * @param {Boolean} dialogTag 弹窗状态
 * @param {Array} tag_arrs 标签数组
 * @param {String} tag_radio_type 商品标签值
 */
const tag_radio_type = ref(0)
const tag_arrs = ref([])
const dialogTag = ref(false)
const clickTag = (row) => {
    objs.value = row
    tag_radio_type.value = row.label_id || 0
    dialogTag.value = true
}
// 确认
const confirmTag = () => {
    btn_loading.value = true
    proxy.$axios
        .post("product/setLabel", {
            product_id: objs.value.product_id,
            label_id: tag_radio_type.value,
        })
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                dialogTag.value = false
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
function getTag() {
    proxy.$axios
        .get("product/setLabel")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                result.unshift({
                    label_id: 0,
                    label_name: "无标签",
                })
                tag_arrs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 获取商品分类、颜色、等级
 * @param {Array} cate_arrs 分类数组
 */
const pub_options = ref({})
const cate_arrs = ref([])
function pubClass() {
    proxy.$axios
        .get("product/search")
        .then((res) => {
            getStatistics()
            if (res.data.code == 0) {
                let result = res.data.data
                result.attr_list.forEach((item) => {
                    item.attr_value_name = item.attr_name
                    item.attr_value_id = item.attr_id
                })
                let arrs = []
                let lengths = result.cate_list.length < 24 ? result.cate_list.length : 24
                for (let i = 0; i < lengths; i++) {
                    arrs.push(result.cate_list[i])
                }
                pub_options.value = result
                cate_arrs.value = arrs
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
// 过滤筛选商品分类
const filterClass = (val) => {
    let classs = []
    pub_options.value.cate_list.forEach((item) => {
        if (item.title.indexOf(val) > -1) {
            classs.push(item)
        }
    })
    cate_arrs.value = classs
}
const clearCate = () => {
    filterClass("")
}

// 添加
const clickAdd = () => {
    router.push("/Goods/GoodsListAdd")
}
const clickEdit = (row) => {
    router.push({
        path: "/Goods/GoodsListEdit",
        query: {
            gid: row.product_id,
        },
    })
}

// 删除单个
const clickDel = (row) => {
    postDel(row.product_id)
}

// 删除接口
function postDel(params) {
    proxy.$axios
        .post("product/delete", {
            product_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

const clickDetail = (row) => {
    router.push({
        path: "/Goods/GoodsListDetail",
        query: {
            gid: row.product_id,
        },
    })
}
</script>
<script>
export default {
    name: "GoodsList",
}
</script>

<style lang="less" scoped>
.tag-good {
    margin-bottom: 10px;
}
.downs {
    margin-left: @margin-sm;
}
:deep(.el-upload-list) {
    width: 460px;
}
.dialog-h3 {
    font-size: @font-size-md;
    color: #333;
    margin-bottom: @margin-lg;
    p {
        line-height: 24px;
        margin-bottom: @margin-base;
        &.dialog-h3-title {
            margin-bottom: @margin-xs;
            font-weight: bold;
        }
    }
    a,
    .span-down {
        color: #409eff;
        cursor: pointer;
    }
}
.batch-oper {
    margin-top: @margin-xs;
    margin-bottom: @margin-lg;
}
.good-price {
    color: @red;
    font-size: @font-size-lg;
    em {
        font-size: @font-size-md;
    }
    span {
        margin-left: @margin-base;
        color: #303133;
        font-size: @font-size-md;
    }
}
:deep(.el-radio) {
    height: auto;
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
